<template>
	<view style="padding: 20rpx;height: 100%;">
		<view class="display_flex u-m-b-20">

			<view class="display_flex">
				<el-select v-model="params.typeDesc" placeholder="请选择类型" size="mini" @change="confirmSearch">
					<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>

				<el-input placeholder="请输入内容" v-model="params.searchText" @change="confirmSearch" class="u-m-l-20"
					size="mini"></el-input>
			</view>


			<el-button type="primary" size="mini" @click="show1 = true" class="u-m-l-20">
				新增PPT
			</el-button>
		</view>


		<view class="u-padding-20 bgfff" style="height: calc(100% - 140rpx);width: 100%;">
			<el-table :data="dataList" style="width: 100%" stripe border size="mini" height="95%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="number" label="编号">
				</el-table-column>

				<el-table-column prop="classDesc" label="分类">
				</el-table-column>
				<el-table-column prop="title" label="标题">
				</el-table-column>
				<el-table-column prop="desc" label="描述">
				</el-table-column>
				<el-table-column prop="age" label="适合年龄">
				</el-table-column>
				<el-table-column prop="type" label="合集还是单个">
				</el-table-column>
				<el-table-column prop="price" label="价格">
				</el-table-column>
				<el-table-column prop="price" label="价格">
				</el-table-column>
				<el-table-column prop="images" label="图片" width="100" align="center">
					<template slot-scope="scope">
						<el-image style="width: 20px; height: 20px" :src="scope.row.images[0]"
							:preview-src-list="[scope.row.images]" />
					</template>
				</el-table-column>
				<el-table-column prop="downLoadNum" label="下载次数">
				</el-table-column>
				<!-- <el-table-column prop="groupNum" label="排序">
				</el-table-column> -->
				<el-table-column prop="createdAt" label="创建日期">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="deleteThis(scope.row)" type="text" size="small">删除</el-button>
						<el-button type="text" size="small" @click="editThis(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<view class="u-text-right bgfff u-padding-20">
				<el-pagination @current-change="handleCurrentChange" small :current-page="params.pageNum"
					:page-sizes="[20, 40, 60,80,100]" :page-count="maxPage"
					layout="total, sizes, prev, pager, next, jumper" :total="maxCount">
				</el-pagination>
			</view>
		</view>

		<courseEdit v-if="show1" @save="show1 = false,chooseItem='',getData()" :detail="chooseItem"
			@close="show1 = false,chooseItem = ''" />
	</view>
</template>

<script>
	import courseEdit from '@/components/courseEdit'
	let that
	export default {
		components: {
			courseEdit
		},
		data() {
			return {
				typeOptions: [{
					value: "课件",
					label: "课件"
				}, {
					value: "资料",
					label: "资料"
				}, {
					value: "图片",
					label: "图片"
				}, {
					value: "视频",
					label: "视频"
				}],

				show1: false,
				chooseItem: '',
				dataList: [],
				maxCount: 1,
				maxPage: 1,

				params: {
					pageSize: 20,
					pageNum: 1,
					typeDesc: '',
					searchText: '',
				}
			}
		},

		onLoad() {
			that = this
			that.getData()
		},

		methods: {
			deleteThis(item) {
				uni.showModal({
					content: "是否删除此条目",
					success(res) {
						if (res.confirm) {
							that.$http.Post("admin/artPPT/remove", {
								objectId: item.objectId
							}, "加载中...").then(res => {
								that.getData()
							})
						}
					}
				})
			},

			confirmSearch() {
				that.dataList = []
				that.params.pageNum = 1
				that.getData()
			},

			editThis(item) {
				this.chooseItem = item
				this.show1 = true
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getData()
			},

			getData() {
				this.$http.Post("admin/artPPT/list", that.params, "加载中...").then(res => {
					this.dataList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
				})
			}
		}
	}
</script>

<style>

</style>
